import React, {Component} from 'react'
import {Link} from 'react-router-dom'

import SidebarService from '../services/sidebarService.js'

export default class SidebarView extends Component {
	constructor(){
		super();
		
	}
	render(){
		let sidebarcoverStyle = {
			background: this.props.show ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0)",
			transform: this.props.show ? "none" : "translateX(-100%)"
		}
		let sidebarStyle = {
			transform: this.props.show ? "none" : "translateX(-100%)"
		}
		let data = 	this.props.pathname === '/shop' ? SidebarService.shopSilderBarData : SidebarService.homeSilderBarData
		return(
			<div class="sidebar-cover" style={sidebarcoverStyle} onClick={this.hideSidebar.bind(this)}>
				<nav class="sidebar" style={sidebarStyle}>
				{
					data.map((item,index)=>{
						return <a key={index} onClick={this.goPage.bind(this,item)}>{item.title} <i class="iconfont icon-arrow-right right"></i></a>
					})
				}
					
				</nav>
			</div>
		)
	}
	goPage(item){//路由进入页面
		this.props.history.push(item.path);
		this.props.hideHandle(item.header);
	}
	hideSidebar(){//点击遮罩隐藏侧边栏
		this.props.hideHandle();
	}
}
